<template>
  <div style="height: 100%">
    <el-row class="tac">
      <el-col :span="4">
        <el-menu
          :default-active="this.$route.path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <el-menu-item-group>
            <el-menu-item index="/info">个人信息</el-menu-item>
            <el-menu-item index="/History">我的订单</el-menu-item>

            <el-menu-item index="/order">我的预约</el-menu-item>
            <el-menu-item index="/house">我的房源</el-menu-item>
            <el-menu-item index="/commodity">我的商品</el-menu-item>
          </el-menu-item-group>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <!--<el-tabs v-model="activeName" tab-position="left" type="border-card" style="height: 100%">-->
        <!--<el-tab-pane label="订单历史" name="first">-->
        <!--<el-table :data="chargeHistory" border stripe style="margin: 0px">-->
        <!--<el-table-column align="center" label="订单金额" prop="amount"></el-table-column>-->
        <!--<el-table-column align="center" label="订单日期" prop="chargeTime" :formatter="formatCharge"></el-table-column>-->
        <!--<el-table-column align="center" label="经纪人" prop="chargeTime" :formatter="formatCharge"></el-table-column>-->
        <!--<el-table-column align="center" label="操作" prop="chargeTime" :formatter="formatCharge"></el-table-column>-->
        <!--</el-table>-->
        <!--</el-tab-pane>-->
        <!--</el-tabs>-->
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            fixed
            prop="date"
            label="上架日期"
            mid-width="25px">
          </el-table-column>
          <el-table-column
            prop="amount"
            label="商品编号"
            mid-width="25px">
          </el-table-column>
          <el-table-column
            prop="name"
            label="经纪人姓名"
            mid-width="25px">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            mid-width="25px">
            <template slot-scope="scope">
              <el-button @click="open2" type="text" size="small">查看</el-button>
              <el-button @click="open(scope.row.$index)" type="text" size="small">取消收藏</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--<el-tabs v-model="activeName" tab-position="left" type="border-card" style="height: 100%">-->
    <!--<el-tab-pane label="订单历史" name="first">-->
    <!--<el-table :data="chargeHistory" border stripe style="margin: 0px">-->
    <!--<el-table-column align="center" label="订单金额" prop="amount"></el-table-column>-->
    <!--<el-table-column align="center" label="订单日期" prop="chargeTime" :formatter="formatCharge"></el-table-column>-->
    <!--<el-table-column align="center" label="经纪人" prop="chargeTime" :formatter="formatCharge"></el-table-column>-->
    <!--<el-table-column align="center" label="操作" prop="chargeTime" :formatter="formatCharge"></el-table-column>-->
    <!--</el-table>-->
    <!--</el-tab-pane>-->

  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'first',
      chargeHistory: [
        // {
        //   id: 0,
        //   amount: 100,
        //   chargeTime: new Date('2020/09/18').toLocaleDateString()
        // },
        // {
        //   id: 1,
        //   amount: 300,
        //   chargeTime: new Date('2020/09/19').toLocaleDateString()
        // },
        // {
        //   id: 2,
        //   amount: 200,
        //   chargeTime: new Date('2020/09/20').toLocaleDateString()
        // }
      ],
      spendHistory: [
        // {
        //   id: 0,
        //   movie: '信条',
        //   amount: 50,
        //   spendTime: new Date('2020/09/18').toLocaleDateString()
        // },
        // {
        //   id: 1,
        //   movie: '信条',
        //   amount: 100,
        //   spendTime: new Date('2020/09/18').toLocaleDateString()
        // },
        // {
        //   id: 2,
        //   movie: '信条',
        //   amount: 150,
        //   spendTime: new Date('2020/09/19').toLocaleDateString()
        // }
      ],
      tableData: [
        { date: '2021-05-01', amount: '171250533', name: '小农' }
      ]

    }
  },
  created () {
    this.initChargeHistory()
    this.initSpendHistory()
  },
  methods: {
    async initChargeHistory () {
      var userId = window.sessionStorage.getItem('userId')
      const res = await this.$http.get('/user/history/charge/' + userId)
      if (res.data.success === false) {
        this.$message.error(res.data.message)
      } else {
        this.chargeHistory = res.data.content
      }
    },
    async initSpendHistory () {
      var userId = window.sessionStorage.getItem('userId')
      const res = await this.$http.get('/user/history/spend/' + userId)
      if (res.data.success === false) {
        this.$message.error(res.data.message)
      } else {
        this.spendHistory = res.data.content
      }
    },
    formatCharge (row, column) {
      return new Date(row.chargeTime).toLocaleString()
    },
    formatSpend (row, column) {
      return new Date(row.spendTime).toLocaleString()
    },
    open2 () {
      this.$router.push('/movieinfo')
    },
    open (row) {
      this.$confirm('此操作将取消收藏, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '取消收藏!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
